<template>
	<view class="order-submission">
		<view class="allAddress" :style="systemStore ? '' : 'padding-top: 0.2*100rpx'">
			<view class="address acea-row row-between-wrapper" v-if="shipping_type === 0" @click="addressTap">
				<view class="addressCon" v-if="addressInfo.realName">
					<view class="name">
						{{ addressInfo.realName }}
						<text class="phone">{{ addressInfo.phone }}</text>
					</view>
					<view>
						<text class="default font-color-red" v-if="addressInfo.isDefault">[默认]</text>
						{{ addressInfo.province }}{{ addressInfo.city}}{{ addressInfo.district }}{{ addressInfo.detail }}
					</view>
				</view>
				<view class="addressCon" v-else>
					<view class="setaddress">设置收货地址</view>
				</view>
				<view class="iconfont icon-jiantou"></view>
			</view>
			<div class="address acea-row row-between-wrapper" v-if="shipping_type === 1" @click="showStoreList">
				<div class="addressCon" v-if="storeItems">
					<div class="name">
						{{ storeItems.name }}
						<span class="phone">{{storeItems.phone }}</span>
					</div>
					<div>{{ storeItems.address}}</div>
				</div>
				<div class="addressCon" v-else>
					<div class="name">
						{{ systemStore.name }}
						<span class="phone">{{systemStore.phone}}</span>
					</div>
					<div>{{ systemStore.address }}</div>
				</div>
				<div class="iconfont icon-jiantou"></div>
			</div>
			<view class="line">
				<image src="https://h5.ylsp.vip/file/static/images/line.jpg" />
			</view>
		</view>
		
		
		<view class="goodscollection">
			<view class="collectionGoods" >
				<view class="item acea-row row-between-wrapper"
					>
					<view class="pictrue">
						<image :src="images" />
					</view>
					<view class="text acea-row row-column-between">
						<view class="infor line1">{{ title }}</view>
						<view class="acea-row row-between-wrapper">
							<view class="money font-color-red">有效期</view>
							<view class="money font-color-red">{{ formatTimeThree(time) }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tips">
			<view class="item">
				1、请选择正确的发货地址，兑奖后将不给予修改地址
			</view>
			<view class="item">
				2、平台的奖品不提供查看物流跟踪，如需实时关注物流信息，请联系客服咨询物流单号自行查询
			</view>
		</view>
		
		
		<view class="footer__view">
			<view class="btn bg" v-if="clickBtn">
				立即兑奖
			</view>
			<view class="btn" v-else @click="cashaprize">
				立即兑奖
			</view>
		</view>

		<AddressWindow @checked="changeAddress" @redirect="addressRedirect" v-model="showAddress"
			:checked="addressInfo.id" ref="mychild"></AddressWindow>
	</view>
</template>

<script>
	import AddressWindow from "@/components/AddressWindow";
	import {
		postOrderConfirm,
		postOrderComputed,
		createOrder
	} from "@/api/order";
	import {
		mapGetters
	} from "vuex";
	import {
		handleOrderPayResults,
		subscribeMessage
	} from "@/libs/order";
	import {
		weappPay
	} from "@/libs/wechat";
	import {
		getExchange
	} from "@/api/user";
	import {
		isWeixin,
		handleErrorMessage
	} from "@/utils";

	const NAME = "OrderSubmission",
		_isWeixin = isWeixin();
	export default {
		name: NAME,
		components: {
			AddressWindow,
		},
		props: {},
		data: function() {
			return {
				id: '',
				showAddress: false,
				addressInfo: {},
				addressLoaded: false,
				shipping_type: 0,
				images: '',
				time: '',
				title: '',
				clickBtn: false
			};
		},
		computed: mapGetters(["userInfo"]),
		onShow: function() {
			let that = this;
			this.$store.dispatch("getUser", true);
			this.id = that.$yroute.query.id;
			this.images = that.$yroute.query.images;
			this.time = that.$yroute.query.time;
			this.title = that.$yroute.query.title;
		},
		methods: {

			addressTap: function() {
				this.showAddress = true;
				if (!this.addressLoaded) {
					this.addressLoaded = true;
					this.$refs.mychild.getAddressList();
				}
			},
			addressRedirect() {
				this.addressLoaded = false;
				this.showAddress = false;
			},
			changeAddress(addressInfo) {
				this.addressInfo = addressInfo;
			},
			formatTimeThree(time) {
			  time = time
			  const d = new Date(time)
			  return (
			    d.getFullYear() + '年' +
			    (d.getMonth() + 1) +
			    '月' +
			    d.getDate() +
			    '日'
			  )
			},
			cashaprize(){
				if (!this.addressInfo.id && !this.shipping_type) {
					uni.showToast({
						title: "请选择收货地址",
						icon: "none",
						duration: 3000,
					});
					return;
				}
				console.log(this.addressInfo)
				
				uni.showLoading({
					title: "努力加载中",
				});
				getExchange(this.id, this.addressInfo.id)
					.then((res) => {
						uni.hideLoading();
						console.log(res.data)
						this.clickBtn = true
						uni.showToast({
							title: "兑奖成功",
							icon: "success",
							duration: 2000,
						});
						setTimeout(() => {
							return this.$yrouter.back();
						}, 2000);
					})
					.catch((err) => {
						console.log(err)
					});
			}
		},
	};
</script>
<style scoped lang="less">
	.tips{
		width: 100%;
		margin-top: 100rpx;
		padding: 0 100rpx;
		
		.item{
			color: #ff3334;
			font-size: 26rpx;
			margin-top: 20rpx;
		}
	}
	
	.footer__view{
		width: 100%;
		margin-top: 50rpx;
		
		.btn{
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			margin: auto;
			border-radius: 80rpx;
			background-color: #e54724;
			font-size: 30rpx;
			color: #FFFFFF;
		}
		
		.bg{
			background-color: #c8c8c8;
			color: #999999;
		}
	}

	.order-submission .wrapper .shipping select {
		color: #999;
		padding-right: 0.15 * 100rpx;
	}

	.order-submission .wrapper .shipping .iconfont {
		font-size: 0.3 * 100rpx;
		color: #515151;
	}

	.order-submission .allAddress {
		width: 100%;

	}

	.order-submission .allAddress .nav {
		margin: 0 auto;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.order-submission .allAddress .nav .item {
		flex: 1;
		position: relative;
	}

	.order-submission .allAddress .nav .item.on {
		position: relative;
	}

	.order-submission .allAddress .nav .item.on:before {
		position: absolute;
		bottom: 0;
		content: "快递配送";
		font-size: 0.28 * 100rpx;
		display: block;
		height: 0;
		left: 0;
		right: 0;
		border-width: 0.4 * 100rpx;
		border-style: solid;
		border-color: #fff;
		z-index: 9;
		text-align: center;
		line-height: 0.14 * 100rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(2).on:before {
		content: "到店自提";
		border-width: 0.4 * 100rpx;
	}

	.order-submission .allAddress .nav .item.on2 {
		position: relative;
	}

	.order-submission .allAddress .nav .item.on2:before {
		position: absolute;
		bottom: 0;
		content: "到店自提";
		font-size: 0.28 * 100rpx;
		display: block;
		height: 0;
		left: 0;
		right: 0;
		border-width: 0.4 * 100rpx;
		border-style: solid;
		border-color: #d5e6e6;
		text-align: center;
		line-height: 0.14 * 100rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(1).on2:before {
		content: "快递配送";
		border-width: 0.4 * 100rpx;
	}

	.order-submission .allAddress .address {
		height: 1.5 * 100rpx;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.order-submission .allAddress .line {
		width: 7.1 * 100rpx;
		margin: 0 auto;
	}

	.order-submission .wrapper .item .discount input::placeholder {
		color: #ccc;
	}
</style>